<template>
  <view class="chat-container">
    <!-- 聊天头部 -->
    <view class="chat-header">
      <view class="back-btn" @click="back">
        <text class="iconfont icon-arrow-left"></text>
      </view>
      <view class="title">{{ chatName }}</view>
      <view class="more-btn">
        <text class="iconfont icon-more"></text>
      </view>
    </view>

    <!-- 聊天内容区域 -->
    <scroll-view 
      class="chat-content" 
      scroll-y="true" 
      :scroll-top="scrollTop"
      @scrolltolower="loadMoreMessages"
      refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="refreshMessages"
    >
      <!-- 消息时间提示 -->
      <view class="message-time" v-if="showTimeTips">
        <text>{{ formatTime(currentTime) }}</text>
      </view>

      <!-- 消息列表 -->
      <view class="message-list">
        <!-- 接收的消息 -->
        <view class="message-item receive" v-for="(item, index) in messages" :key="index">
          <view class="avatar">
            <image :src="item.avatar" mode="aspectFill"></image>
          </view>
          <view class="message-content">
            <view class="bubble">
              <text>{{ item.content }}</text>
            </view>
          </view>
        </view>

        <!-- 发送的消息 -->
        <view class="message-item send" v-for="(item, index) in myMessages" :key="index + messages.length">
          <view class="message-content">
            <view class="bubble">
              <text>{{ item.content }}</text>
            </view>
          </view>
          <view class="avatar">
            <image :src="myAvatar" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <view class="function-btn">
        <text class="iconfont icon-plus"></text>
      </view>
      <view class="input-wrapper">
        <input 
          type="text" 
          v-model="message" 
          placeholder="请输入消息..." 
          @confirm="sendMessage"
        />
      </view>
      <view class="send-btn" @click="sendMessage" :class="{ disabled: !message.trim() }">
        <text>发送</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chatName: '张三',
      myAvatar: '/static/images/my_avatar.png',
      messages: [
        { avatar: '/static/images/other_avatar.png', content: '你好，今天过得怎么样？', time: '09:30' },
        { avatar: '/static/images/other_avatar.png', content: '我最近在学习uniapp开发，感觉还不错', time: '09:31' },
        { avatar: '/static/images/other_avatar.png', content: '你有没有什么好的学习资源推荐？', time: '09:32' }
      ],
      myMessages: [
        { content: '我过得挺好的，谢谢关心！', time: '09:35' },
        { content: '我觉得官方文档和插件市场都很不错', time: '09:36' },
        { content: '你可以去uniapp官网看看，那里有很多教程和示例', time: '09:37' }
      ],
      message: '',
      scrollTop: 0,
      refreshing: false,
      currentTime: new Date(),
      showTimeTips: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollToBottom();
    });
  },
  methods: {
    // 返回上一页
    back() {
      uni.navigateBack();
    },

    // 发送消息
    sendMessage() {
      if (!this.message.trim()) return;
      
      this.myMessages.push({
        content: this.message,
        time: this.formatTime(new Date())
      });
      
      this.message = '';
      this.scrollToBottom();
      
      // 模拟回复
      setTimeout(() => {
        this.messages.push({
          avatar: '/static/images/other_avatar.png',
          content: '好的，我会去看看的，谢谢你的推荐！',
          time: this.formatTime(new Date())
        });
        this.scrollToBottom();
      }, 1000);
    },

    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.chat-content').boundingClientRect(rect => {
          query.select('.message-list').boundingClientRect(rect2 => {
            this.scrollTop = rect2.height - rect.height;
          }).exec();
        }).exec();
      });
    },

    // 加载更多历史消息
    loadMoreMessages() {
      // 模拟加载更多历史消息
      setTimeout(() => {
        this.messages = [
          { avatar: '/static/images/other_avatar.png', content: '这是一条更早的历史消息', time: '昨天 18:30' },
          { avatar: '/static/images/other_avatar.png', content: '我们之前讨论过项目的事情', time: '昨天 18:31' },
          ...this.messages
        ];
        this.refreshing = false;
      }, 1000);
    },

    // 下拉刷新
    refreshMessages() {
      this.loadMoreMessages();
    },

    // 格式化时间
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    }
  }
}
</script>

<style lang="scss">
.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

/* 聊天头部 */
.chat-header {
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  
  .back-btn, .more-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
  }
}

/* 聊天内容区域 */
.chat-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  background-color: #f5f5f5;
  
  .message-time {
    text-align: center;
    margin: 20rpx 0;
    
    text {
      display: inline-block;
      padding: 8rpx 20rpx;
      background-color: #dcdcdc;
      border-radius: 10rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }
}

/* 消息列表 */
.message-list {
  display: flex;
  flex-direction: column;
}

/* 消息项 */
.message-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .message-content {
    max-width: 70%;
    margin: 0 20rpx;
    position: relative;
  }
  
  .bubble {
    padding: 20rpx 30rpx;
    border-radius: 16rpx;
    font-size: 32rpx;
    line-height: 1.5;
    position: relative;
  }
}

/* 接收的消息 */
.receive {
  .bubble {
    background-color: #fff;
  }
  
  .bubble::before {
    content: '';
    position: absolute;
    left: -12rpx;
    top: 24rpx;
    width: 0;
    height: 0;
    border-top: 10rpx solid transparent;
    border-right: 20rpx solid #fff;
    border-bottom: 10rpx solid transparent;
  }
}

/* 发送的消息 */
.send {
  flex-direction: row-reverse;
  
  .bubble {
    background-color: #07c160;
    color: #fff;
  }
  
  .bubble::after {
    content: '';
    position: absolute;
    right: -12rpx;
    top: 24rpx;
    width: 0;
    height: 0;
    border-top: 10rpx solid transparent;
    border-left: 20rpx solid #07c160;
    border-bottom: 10rpx solid transparent;
  }
}

/* 输入区域 */
.input-area {
  height: 120rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-top: 1rpx solid #eee;
  
  .function-btn, .send-btn {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }
  
  .send-btn {
    background-color: #07c160;
    color: #fff;
    border-radius: 16rpx;
    margin-left: 20rpx;
    
    &.disabled {
      background-color: #dcdcdc;
      color: #999;
    }
  }
  
  .input-wrapper {
    flex: 1;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    padding: 0 30rpx;
    
    input {
      width: 100%;
      height: 100%;
      font-size: 32rpx;
    }
  }
}
</style>    